<template>
  <div>
    <el-row style="margin:20px;">
      <el-col>
        <el-button type="primary" size="medium" @click="showAdd = true,editForm = { }">添加选项</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" prop="DownloadMoney" label="充值金额(元)"></el-table-column>
      <el-table-column align="center" prop="DownloadOriginal" label="原价"></el-table-column>
      <el-table-column align="center" prop="DownloadNum" label="积分个数"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="isUse(scope.row.DownloadId,1)"
            v-if="scope.row.DownloadStatus == 0"
            type="primary"
            size="mini"
          >启用</el-button>
          <el-button @click="isUse(scope.row.DownloadId,0)" v-else type="warning" size="mini">停用</el-button>
          <el-button
            @click="toEdit(scope.row.DownloadMoney,scope.row.DownloadNum,scope.row.DownloadId,scope.row.DownloadOriginal)"
            type="primary"
            size="mini"
          >编辑</el-button>
          <el-button @click="deleteProduct(scope.row.DownloadId)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑" :visible.sync="showAdd" width="50%">
      <el-form :model="editForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="充值金额：">
          <el-input-number v-model="editForm.DownloadMoney" controls-position="right"></el-input-number>个
        </el-form-item>
        <el-form-item label="原价：">
          <el-input-number v-model="editForm.DownloadOriginal" controls-position="right"></el-input-number>个
        </el-form-item>
        <el-form-item label="积分个数">
          <el-input-number v-model="editForm.DownloadNum" controls-position="right"></el-input-number>个
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showAdd = false,editForm = { }">取 消</el-button>
        <el-button type="primary" @click="save(),showAdd = false">确 定</el-button>
      </span>
    </el-dialog>
    <h4 style="padding-left:10px;">充值说明</h4>
    <Tinymce v-model="explain" :height="300" style="width: 705px;"></Tinymce>
    <el-button @click="saveExplain()" type="primary">保存</el-button>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import {
  DownloadGet,
  DownloadSave,
  DownloadDelete,
  DownloadAdd
} from "@/api/member";
export default {
  data() {
    return {
      showAdd: false,
      tableData: [],
      explain: "",
      editForm: {
        DownloadNum: "",
        DownloadMoney: "",
        DownloadId: ""
      },
      explainId: ""
    };
  },
  methods: {
    async saveExplain() {
      var data = {
        explain: this.explain,
        explainId: this.explainId
      };
      await DownloadSave(data).then(res => {
        this.$message({
          type: "success",
          message: res.data.data
        });
        this.getData();
      });
    },
    toEdit(money, num, id,ori) {
      this.editForm = {
        DownloadNum: num,
        DownloadMoney: money,
        DownloadId: id,
        DownloadOriginal:ori
      };
      this.showAdd = true;
    },
    async deleteProduct(id) {
      await DownloadDelete({ DownloadId: id }).then(res => {
        this.$message({
          type: "success",
          message: res.data.data
        });
        this.getData();
      });
    },
    async save() {
      if (this.editForm.DownloadNum == "") {
        this.$message.error("请填写下载币个数");
      }
      if (this.editForm.DownloadMoney == "") {
        this.$message.error("请填写充值金额");
      }

      if (
        this.editForm.DownloadId == "" ||
        this.editForm.DownloadId == undefined
      ) {
        await DownloadAdd(this.editForm).then(res => {
          this.$message({
            type: "success",
            message: res.data.data 
          });
        });
      } else {
        await DownloadSave(this.editForm).then(res => {
          this.$message({
            type: "success",
            message: res.data.data
          });
        });
      }

      this.getData();
      this.editForm = {};
    },
    handleClose() {},
    getData() {
      DownloadGet().then(res => {
        this.tableData = res.data.data.download;
        this.explain = res.data.data.explain.explain;
        this.explainId = res.data.data.explain.explainId;
      });
    },
    async isUse(id, val) {
      var DownloadStatus = "";
      if (val == 0) {
        DownloadStatus = 0;
      } else {
        DownloadStatus = 1;
      }
      await DownloadSave({
        DownloadId: id,
        DownloadStatus: DownloadStatus
      }).then(res => {
        this.$message({
          type: "success",
          message: res.data.data
        });
        this.getData();
      });
    }
  },
  mounted() {
    this.getData();
  },
  components: {
    Tinymce
  }
};
</script>

<style lang="css" scoped>
</style>